<template>
  <div class="map-show">
    <el-container>
      <el-row :gutter="10">
        <!--左侧-->
        <el-col :span="18"
                class=" map-container">
          <div class="map-tool bk">
            <div class="toolIcon">
              <el-dropdown>
                <el-button icon="icon iconfont icon-iconset0403"
                           size="small">
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="setMapType('normal')">地图</el-dropdown-item>
                  <el-dropdown-item @click.native="setMapType('satellite')">卫星地图</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button icon="icon iconfont icon-whg-kuangxuan"
                         title="画矩形"
                         size="small"
                         @click="draw('rectangle')"></el-button>
              <el-button icon="icon iconfont icon-weibiaoti38"
                         title="画圆"
                         size="small"
                         @click="draw('circle')"></el-button>
              <el-button icon="icon iconfont icon-icon-dianjiduobianxing"
                         title="画多边形"
                         size="small"
                         @click="draw('polygon')"></el-button>
              <el-button icon="icon iconfont icon-erji-lujingguanli"
                         title="画折线"
                         size="small"
                         @click="draw('polyline')"></el-button>
              <el-button icon="icon iconfont icon-dituzhaofang"
                         title="标注点"
                         size="small"
                         @click="draw('marker')"></el-button>
              <!-- <el-button icon="icon iconfont icon-whg-pengzhuang1"
                         size="small"></el-button> -->
              <el-button icon="icon iconfont icon-shanchuwendang"
                         title="清除覆盖物"
                         size="small"
                         @click="clearOverlays"></el-button>
            </div>
          </div>
          <div class="map-box bk">
            <!-- <div class="serach"
                >
              <el-input placeholder="请输入地址">
                <el-button slot="append"
                           icon="el-icon-search"
                           @click="handleSearch">
                </el-button>
              </el-input>
            </div> -->
            <div class="map"
                 id="allmap"></div>
          </div>
        </el-col>
        <!--右侧-->
        <el-col :span="6"
                class="objectContainer">
          <div class="bk object-box">
            <el-tabs type="border-card"
                     v-model="activeName">
              <el-tab-pane label="对象列表"
                           name="objectList">
                <div class="objectList">
                  <template v-for="(item,index) in objectList">
                    <div class="objectItem"
                         :key="index">
                      <el-checkbox :checked="true"
                                   @change="(isCheck)=>changepoint(isCheck,item.longitude,
                                   item.latitude, item.rowkey, item.objectUri, item.objectType,
                                   item.displayName,item.name,item.iconUrl)">
                      </el-checkbox>
                      <a @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl)">
                        <em><img class="imgAuto"
                               :src="item.iconUrl" />
                        </em>
                      </a>
                      <dl>
                        <dt>
                          <a @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl)">
                            <strong>{{item.displayName}}</strong>
                          </a>
                        </dt>
                      </dl>
                    </div>
                  </template>
                </div>
              </el-tab-pane>
              <el-tab-pane label="对象详情"
                           name="obejctDeatil">
                <div class="obejctDeatil">
                  <!--添加到目标分析-->
                  <div class="relationGraphBox">
                    <el-button class="addToGraph"
                               @click="handleAddToGraph(objectInfo)">
                      <i class="icon iconfont icon-whg-dituweizhi FsF curP JQ-addMap"
                         title="添加到目标分析">添加到目标分析</i>
                    </el-button>
                  </div>
                  <div class="objectBox"
                       v-show="objectInfo!==''">
                    <a target="_blank">
                      <div class="objwfBx">
                        <em @click="viewObjectInfo(objectInfo.objectType,objectInfo.rowkey,objectInfo.objectUri,objectInfo.name,objectInfo.displayName,objectInfo.iconUrl)"> <img :src="objectInfo.iconUrl"
                               alt=""
                               width="40px;"
                               height="40px;" />
                        </em>
                        <dl>
                          <dd class="TovSd">
                            <a @click="viewObjectInfo(objectInfo.objectType,objectInfo.rowkey,objectInfo.objectUri,objectInfo.name,objectInfo.displayName,objectInfo.iconUrl)">
                              <strong>{{objectInfo.displayName}}</strong>
                            </a>
                            <span style="color: #666"> - {{objectInfo.name}}</span>
                          </dd>
                          <dd style="color: #666">({{computedObjectType(objectInfo.objectType)}})</dd>
                        </dl>
                      </div>
                    </a>
                    <!--显示更多或隐藏-->
                    <p class="operation">
                      <a class="showMore"
                         @click="isShowMore=!isShowMore">{{isShowMore?'隐藏':'显示更多'}}</a>
                    </p>
                    <!--相关属性-->
                    <div class="associationAttr"
                         v-show="isShowMore">
                      <ul>
                        <li v-for="(item,index) in association_Attr"
                            :key="index">{{item.displayName}}：
                          <span class="FsH0">{{item.value}}</span>
                        </li>
                      </ul>
                    </div>
                    <!--相关信息-->
                    <div class="associationInfo">
                      <!--相关实体-->
                      <div class="H40t">
                        <span class="fr">
                          <a @click="showEntityOrEventDialog('Entity');"
                             class="Fs2 curP">+添加</a>
                        </span>
                        <strong class="Tit-h4 hs5">相关实体</strong>
                      </div>
                      <div class="M-12 Mt-0 b-b-1e Pb-12">
                        <ul class="newLis">
                          <li v-for="(item,index) in association_Entity"
                              :key="index">
                            <em>
                              <a target="_blank"><img :src="item.iconUrl"
                                     alt=""
                                     width="30px;"
                                     height="30px" />
                              </a>
                            </em>
                            <a target="_blank"
                               :title="item.name"
                               @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl)"
                               style="cursor: pointer;line-height:30px;">
                              {{(item.showName===null || item.showName==="")?item.displayName:item.showName}}
                            </a>
                            <span>--{{item.name}}</span>
                          </li>
                        </ul>
                      </div>
                      <!--相关事件-->
                      <div class="H40t">
                        <span class="fr">
                          <a @click="showEntityOrEventDialog('Event');"
                             class="Fs2 curP">+添加</a>
                        </span>
                        <strong class="Tit-h4 hs5">相关事件</strong>
                      </div>
                      <div class="M-12 Mt-0 b-b-1e Pb-12">
                        <ul class="newLis">
                          <li v-for="(item,index) in association_Event"
                              :key="index">
                            <em>
                              <a target="_blank"><img :src="item.iconUrl"
                                     alt=""
                                     width="30px;"
                                     height="30px" />
                              </a>
                            </em>
                            <a target="_blank"
                               :title="item.name"
                               @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl)"
                               style="cursor: pointer;line-height:30px;">
                              {{(item.showName===null || item.showName==="")?item.displayName:item.showName}}
                            </a>
                            <span>--{{item.name}}</span>
                          </li>
                        </ul>
                      </div>
                      <!--相关文档-->
                      <div class="H40t">
                        <span class="fr">
                          <a @click="showDocOrMediaDialog('Document');"
                             class="Fs2 curP">+添加</a>
                        </span>
                        <strong class="Tit-h4 hs5">相关文档 </strong>
                      </div>
                      <div class="M-12 Mt-0 b-b-1e Pb-12">
                        <ul class="newLis">
                          <li v-for="(item,index) in association_Doc"
                              :key="index">
                            <em>
                              <a target="_blank"><img :src="item.iconUrl"
                                     alt=""
                                     width="30px;"
                                     height="30px" />
                              </a>
                            </em>
                            <a target="_blank"
                               :title="item.name"
                               @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl)"
                               style="cursor: pointer;line-height:30px;">
                              {{(item.showName===null || item.showName==="")?item.displayName:item.showName}}
                            </a>
                            <span>--{{item.name}}</span>
                          </li>
                        </ul>
                      </div>
                      <!--相关多媒体-->
                      <div class="H40t">
                        <span class="fr">
                          <a @click="showDocOrMediaDialog('Media');"
                             class="Fs2 curP">+添加</a>
                        </span>
                        <strong class="Tit-h4 hs5">相关多媒体</strong>
                      </div>
                      <div class="M-12 Mt-0 b-b-1e Pb-12">
                        <ul class="newLis">
                          <li v-for="(item,index) in association_Media"
                              :key="index">
                            <em>
                              <a target="_blank"><img :src="item.iconUrl"
                                     alt=""
                                     width="30px;"
                                     height="30px" />
                              </a>
                            </em>
                            <a target="_blank"
                               :title="item.name"
                               @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl)"
                               style="cursor: pointer;line-height:30px;">
                              {{(item.showName===null || item.showName==="")?item.displayName:item.showName}}
                            </a>
                            <span>--{{item.name}}</span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
    </el-container>
    <!--地图标注对话框-->
    <map-calibration v-if="dialogMapCalibrationVisible"
                     :dialogVisible="dialogMapCalibrationVisible"
                     @closeDialog="closeMapCalibrationDialog"
                     :position="mapCalibrationPoint"
                     @addMarker="addMarker"
                     @spliceObjlist="spliceObjlist">
    </map-calibration>
    <!--选择分组对话框-->
    <choose-group v-if="dialogChooseGroupVisible"
                  :dialogVisible="dialogChooseGroupVisible"
                  @closeDialog="closeChooseGroupDialog"
                  @searchByDrawType="searchByDrawType">
    </choose-group>
    <!--新增文档或多媒体对话框-->
    <!-- <component :rowkey="current_obj_rowkey"
               :objectUri="current_obj_uri"
               v-bind:is="entityOrEvent_dialog"
               :visible="entityOrEvent_dialogVisible"
               @getAssociationInfo="getAssociationInfo"
               :objType="current_obj_type"
               @closeEntityOrEventDialog="closeEntityOrEventDialog">
    </component> -->
    <!--新增文档或多媒体对话框-->
    <!-- <component :rowkey="current_obj_rowkey"
               v-bind:is="docUpload_dialog"
               :visible="docOrMedia_dialogVisible"
               @getAssociationInfo="getAssociationInfo"
               :objType="current_obj_type"
               @closeDocOrMediaUploadDialog="closeDocOrMediaUploadDialog">

    </component> -->
  </div>
</template>
<script>
import { getAssociationAttr, getRelationInfo, getGisList } from '@/api/map'
import mapUtil from '@/utils/mapUtil'
import util from '@/utils'
import eventPointImg from '@/images/event-point.png'
import eventPointCheckImg from '@/images/event-point-checked.png'
// const DocUpload = () => import('@/views/search/operation/docOrMediaUpload.vue')
// const EntityOrEventEditor = () => import('@/views/search/operation/entityOrEventEditor.vue')
const MapCalibration = () => import('@/views/map/map-calibration.vue')
const ChooseGroup = () => import('@/views/map/choose-group.vue')
export default {
    data () {
        return {
            activeName: 'objectList',
            map: '',
            // 鼠标绘制对象
            drawingManager: '',
            // 绘制类型
            drawType: '',
            // 画圆中心点
            centerPoint: '',
            // 画圆半径
            radius: '',
            // 画多边形的点组
            pointArr: [],
            // 覆盖物数组
            overlays: [],
            drawingManagerPolygon: '',
            drawingManagerRectangle: '',
            drawingManagerCircle: '',
            drawingManagerPolyline: '',
            drawingManagerMarker: '',
            dialogMapCalibrationVisible: false,
            dialogChooseGroupVisible: false,
            mapCalibrationPoint: {},
            // 对象列表
            objectList: [],
            // 对象详情
            objectInfo: '',
            // 事件管理器
            EventWrapper: '',
            eventPointImg: eventPointImg,
            eventPointCheckImg: eventPointCheckImg,
            // 相关属性
            association_Attr: [],
            // 相关事件
            association_Event: [],
            // 相关实体
            association_Entity: [],
            // 相关文档
            association_Doc: [],
            // 相关多媒体
            association_Media: [],
            // 是否显示更多属性
            isShowMore: false,
            current_checked_marker: {},
            markerList: [],
            // 新增实例或事件对话框组件
            // entityOrEvent_dialog: EntityOrEventEditor,
            entityOrEvent_dialogVisible: false,
            // 新增实例或事件对话框组件
            // docUpload_dialog: DocUpload,
            docOrMedia_dialogVisible: false,
            // 当前对象类型
            current_obj_type: 'Entity',
            // 当前对象uri
            current_obj_uri: '',
            // 当前对象rowkey
            current_obj_rowkey: '',
            mapReloadData: [],

            // 所属关键字
            key_word: ''
        }
    },
    components: {
        MapCalibration,
        ChooseGroup,
        // EntityOrEventEditor,
        // DocUpload
    },
    created () {
        this.mapReloadData = mapUtil.tool.getMarkersInMap()
    },
    mounted () {
    // 初始化地图
        this.map = mapUtil.initMap(116.403694, 39.927552)
        this.map.enableScrollWheelZoom()
        // 添加地图类型控件
        this.drawingManagerPolygon = mapUtil.tool.createDrawingManager(this.map, BMAP_DRAWING_POLYGON)
        // 添加监听事件
        this.drawingManagerPolygon.addEventListener('polygoncomplete', this.polygoncomplete)

        this.drawingManagerRectangle = mapUtil.tool.createDrawingManager(this.map, BMAP_DRAWING_RECTANGLE)
        // 添加监听事件
        this.drawingManagerRectangle.addEventListener('rectanglecomplete', this.rectanglecomplete)

        this.drawingManagerPolyline = mapUtil.tool.createDrawingManager(this.map, BMAP_DRAWING_POLYLINE)
        // 添加监听事件
        this.drawingManagerPolyline.addEventListener('polylinecomplete', this.polylinecomplete)

        this.drawingManagerCircle = mapUtil.tool.createDrawingManager(this.map, BMAP_DRAWING_CIRCLE)
        // 添加监听事件
        this.drawingManagerCircle.addEventListener('circlecomplete', this.circlecomplete)

        this.drawingManagerMarker = mapUtil.tool.createDrawingManager(this.map, BMAP_DRAWING_MARKER)
        console.log(this.drawingManagerMarker)
        // 添加监听事件
        this.drawingManagerMarker.addEventListener('markercomplete', this.markercomplete)
        // 添加监听事件
        this.drawingManagerCircle.open()
        // 添加鼠标绘制工具监听事件，用于获取绘制结果
        this.EventWrapper = BMapLib.EventWrapper
        // this.drawingManagerCircle.open()
        // 将搜索结果添加到地图(含有地理属性的对象)
        this.$nextTick(function () {
            if (!util.isEmpty(this.mapReloadData)) {
                _.forEach(this.mapReloadData, (item, index) => {
                    this.addMarker(item.longitude, item.latitude, item.rowkey, item.objectUri,
                        item.objectType, item.displayName, item.name, item.iconUrl)
                })
            }
        })
    },
    methods: {
    // 设置地图类型
        setMapType (type) {
            if (type === 'normal') {
                this.map.setMapType(BMAP_NORMAL_MAP)
            } else {
                this.map.setMapType(BMAP_SATELLITE_MAP)
            }
        },
        // 添加覆盖物完成调用的事件
        overlaycomplete (e) {
            this.overlays.push(e.overlay)
        },
        // 画点完成后，派发的事件接口
        markercomplete (overlay) {
            if (overlay.point) {
                this.mapCalibrationPoint = overlay.point
                this.dialogMapCalibrationVisible = true
            }
        },
        // 绘制多边形完成后，派发的事件接口
        polygoncomplete (overlay) {
            let points = overlay.getPath()
            this.pointArr = points.map(element => {
                return {
                    longitude: element.lng,
                    latitude: element.lat
                }
            })
            this.EventWrapper.addListener(overlay, 'click', (e) => {
                this.dialogChooseGroupVisible = true
            })
        },
        // 绘制矩形完成后，派发的事件接口
        rectanglecomplete (overlay) {
            // 关闭绘制矩形
            this.drawingManagerRectangle.close()
            let points = overlay.getPath()
            this.pointArr = points.map(element => {
                return {
                    longitude: element.lng,
                    latitude: element.lat
                }
            })
            this.EventWrapper.addListener(overlay, 'click', (e) => {
                this.dialogChooseGroupVisible = true
            })
        },
        // 绘制线完成后，派发的事件接口
        polylinecomplete (overlay) {
            let points = overlay.getPath()
            this.pointArr = this.getlintnewpoint(points)
            this.dialogChooseGroupVisible = true
        },
        circlecomplete (overlay) {
            // 关闭绘制圆
            this.drawingManagerCircle.close()
            // 获取半径,单位米
            this.radius = (overlay.getRadius() / 1000).toFixed(2)
            this.centerPoint = overlay.getCenter()
            this.EventWrapper.addListener(overlay, 'click', (e) => {
                this.dialogChooseGroupVisible = true
            })
        },
        // 清除覆盖物
        clearOverlays () {
            mapUtil.tool.removeMarkersInMap()
            this.map.clearOverlays()
            this.objectInfo = ''
            this.objectList = []
            this.markerList = []
            this.drawType = ''
        },
        // 初始状态
        initStatus () {
            this.drawingManagerPolygon.close()
            this.drawingManagerPolyline.close()
            this.drawingManagerRectangle.close()
            this.drawingManagerCircle.close()
            this.drawingManagerMarker.close()
            this.removeMapAllListeners()
            this.clearOverlays()
        },
        draw (type) {
            this.initStatus()
            this.drawType = type
            switch (type) {
            case 'marker':
            console.log(this.drawingManagerMarker)
                this.drawingManagerMarker.open()
                // this.EventWrapper.addListener(this.map, 'click', (e) => {

                // })
                break
            case 'polygon':
                this.drawingManagerPolygon.open()
                break
            case 'circle':
                this.drawingManagerCircle.open()
                break
            case 'polyline':
                this.drawingManagerPolyline.open()
                break
            default:
                this.drawingManagerRectangle.open()
            }
        },
        // 显示新增对象或事件对话框
        showEntityOrEventDialog (type) {
            this.current_obj_type = type
            this.entityOrEvent_dialogVisible = true
        },
        // 显示上传文档或多媒体对话框
        showDocOrMediaDialog (type) {
            this.docOrMedia_dialogVisible = true
            this.current_obj_type = type
        },
        // 关闭地图标定对话框
        closeMapCalibrationDialog () {
            this.initStatus()
            this.dialogMapCalibrationVisible = false
        },
        // 关闭选择分组对话框
        closeChooseGroupDialog () {
            this.initStatus()
            this.dialogChooseGroupVisible = false
        },
        // 关闭新增对象或事件对话框
        closeEntityOrEventDialog () {
            this.entityOrEvent_dialogVisible = false
        },
        // 关闭上传文档或多媒体对话框
        closeDocOrMediaUploadDialog () {
            this.docOrMedia_dialogVisible = false
        },
        // 清除map所有的事件监听
        removeMapAllListeners () {
            this.EventWrapper.clearInstanceListeners(this.map)
        },
        getlintnewpoint (pointarr) {
            this.map.setViewport(pointarr, {
                enableAnimation: false,
                margins: [5, 5, 5, 5]
            })
            let pointarrb = []
            // 将所有的点放置在最佳视野内
            let bs = this.map.getBounds() // 获取可视区域
            let bssw = bs.getSouthWest() // 可视区域左下角
            let bsne = bs.getNorthEast() // 可视区域右上角
            let topLat = bsne.lat
            let bottomLat = bssw.lat
            let leftLng = bssw.lng
            let rightLng = bsne.lng
            pointarrb[0] = { longitude: leftLng, latitude: topLat }
            pointarrb[1] = { longitude: leftLng, latitude: bottomLat }
            pointarrb[2] = { longitude: rightLng, latitude: topLat }
            pointarrb[3] = { longitude: rightLng, latitude: bottomLat }
            return pointarrb
        },
        // 地图标定成功后拼接对象列表
        spliceObjlist (rowkey, objectUri, objectType, displayName, name, iconUrl) {
            this.objectList = []
            this.objectList.push({ rowkey: rowkey, objectUri: objectUri, objectType: objectType, displayName: displayName, name: name, iconUrl: iconUrl, longitude: this.mapCalibrationPoint.lng, latitude: this.mapCalibrationPoint.lat })
        },
        // 根据点选框的选择或取消改变点的覆盖物的显示和不显示
        changepoint (isCheck, lng, lat, rowkey, objectUri, objectType, displayName, name, iconUrl) {
            if (isCheck) {
                this.addMarker(lng, lat, rowkey, objectUri, objectType, displayName, name, iconUrl)
            } else {
                mapUtil.tool.removeMarker(this.map, lng, lat)
            }
        },
        // 添加标注
        addMarker (lng, lat, rowkey, objectUri, objectType, displayName, name, iconUrl) {
            let marker = mapUtil.tool.createMarker(new BMap.Point(lng, lat), this.eventPointImg)
            this.map.addOverlay(marker)
            marker.setTitle(displayName)
            // 移除map的监听事件
            this.removeMapAllListeners()
            // 将标注添加到标注列表中
            this.markerList.push({ longitude: lng, latitude: lat, rowkey: rowkey, objectUri: objectUri, objectType: objectType, displayName: displayName, name: name, iconUrl: iconUrl })
            this.EventWrapper.addListener(marker, 'click', (e) => {
                marker.setIcon(new BMap.Icon(eventPointCheckImg, new BMap.Size(32, 36), {
                    imageOffset: new BMap.Size(0, 0),
                    imageSize: new BMap.Size(32, 36)
                }))
                marker.setShadow(new BMap.Icon(eventPointCheckImg, new BMap.Size(0, 0), {}))
                this.current_obj_rowkey = rowkey
                this.current_obj_uri = objectUri
                this.objectInfo = { longitude: lng, latitude: lat, rowkey: rowkey, objectUri: objectUri, objectType: objectType, displayName: displayName, name: name, iconUrl: iconUrl }
                // 当前被点击的标注
                this.current_checked_marker = this.objectInfo

                this.activeName = 'obejctDeatil'
                // 查询相关属性
                this.getAssociationAttr(rowkey, objectUri)
                // 查询相关事件
                this.getAssociationEvent(rowkey)
                // 查询相关实体
                this.getAssociationEntity(rowkey)
                // 查询相关文档
                this.getAssociationDoc(rowkey)
                // 查询相关多媒体
                this.getAssociationMedia(rowkey)

                // 其他marker的恢复原样
                this.changeMarkerIcon(this.objectList, this.current_checked_marker)
            })
        },
        // 当marker被单击后高亮显示，其他的恢复原样
        changeMarkerIcon (markerList, marker) {
            markerList.forEach(ele => {
                if (!(ele.longitude === marker.longitude && ele.latitude === marker.latitude && ele.rowkey === marker.rowkey)) {
                    mapUtil.tool.removeMarker(this.map, ele.longitude, ele.latitude)
                    this.addMarker(ele.longitude, ele.latitude, ele.rowkey, ele.objectUri, ele.objectType, ele.displayName, ele.name, ele.iconUrl)
                }
            })
        },
        // 根据绘制类型查询
        searchByDrawType (objectList, propertyList, queryTimeStart, queryTimeEnd) {
            propertyList = propertyList.map(item => {
                return {
                    'propertyUri': item,
                    'propertyType': 'GisData'
                }
            })
            switch (this.drawType) {
            case 'circle':
                this.searchByClircle(objectList, propertyList, queryTimeStart, queryTimeEnd)
                break
            default:
                this.searchByPolygon(objectList, propertyList, queryTimeStart, queryTimeEnd)
            }
        },
        // 多边形区域搜索(包括矩形，多边形，折线)
        searchByPolygon (objectList, propertyList, queryTimeStart, queryTimeEnd) {
            // 请求参数
            let params = {
                gisShape: 'POLYGON',
                polygon: this.pointArr,
                objectList: objectList,
                propertyList: propertyList,
                queryTimeStart: (new Date(queryTimeStart)).getTime(),
                queryTimeEnd: (new Date(queryTimeEnd)).getTime()
            }
            getGisList(params).then(response => {
                this.objectList = response.data
                this.objectList.forEach(item => {
                    this.addMarker(item.longitude, item.latitude, item.rowkey, item.objectUri, item.objectType, item.displayName, item.name, item.iconUrl)
                })
            })
        },
        // 圆形区域搜索
        searchByClircle (objectList, propertyList, queryTimeStart, queryTimeEnd) {
            // 请求参数
            let params = {
                gisShape: 'CIRCLE',
                circle: {
                    latitude: this.centerPoint.lat,
                    longitude: this.centerPoint.lng,
                    distance: Number(this.radius)
                },
                objectList: objectList,
                propertyList: propertyList,
                queryTimeStart: (new Date(queryTimeStart)).getTime(),
                queryTimeEnd: (new Date(queryTimeEnd)).getTime()
            }
            getGisList(params).then(response => {
                this.objectList = response.data
                this.objectList.forEach(item => {
                    this.addMarker(item.longitude, item.latitude, item.rowkey, item.objectUri, item.objectType, item.displayName, item.name, item.iconUrl)
                })
            })
        },
        // 获取相关属性
        getAssociationAttr (rowkey, objectUri) {
            this.association_Attr = []
            getAssociationAttr({ rowkey: rowkey, objectUri: objectUri }).then(response => {
                let propertyList = response.data.propertyList
                propertyList.forEach((item, index) => {
                    let valueStr = ''
                    if (item.propertyType === 'GisData') {
                        let value = item.propertyValues[0].value
                        valueStr = value.address + ',' + value.latitude + ',' + value.longitude
                    } else if (item.propertyType === 'TimeInterval') {
                        let value = item.propertyValues[0].value
                        valueStr = value.timeStart + ' - ' + value.timeEnd
                    } else {
                        valueStr = item.propertyValues[0].value
                    }
                    this.association_Attr.push({
                        displayName: item.propertyName,
                        value: valueStr
                    })
                })
            })
        },
        getAssociationInfo (data) {
            switch (this.current_obj_type) {
            case 'Entity':
                this.association_Entity.push(data)
                // this.getAssociationEntity(this.current_obj_rowkey)
                break
            case 'Event':
                this.association_Event.push(data)
                // this.getAssociationEvent(this.current_obj_rowkey)
                break
            case 'Document':
                this.association_Doc.push(data)
                // this.getAssociationDoc(this.current_obj_rowkey)
                break
            default:
                this.association_Media.push(data)
        // this.getAssociationMedia(this.current_obj_rowkey)
            }
        },
        // 获取相关事件
        getAssociationEvent (rowkey) {
            getRelationInfo({ rowkey: rowkey, objectType: 'com.scistor.object.event' }).then(response => {
                this.association_Event = response.data
            })
        },
        // 获取相关实体
        getAssociationEntity (rowkey) {
            getRelationInfo({ rowkey: rowkey, objectType: 'com.scistor.object.entity' }).then(response => {
                this.association_Entity = response.data
            })
        },
        // 获取相关文档
        getAssociationDoc (rowkey) {
            getRelationInfo({ rowkey: rowkey, objectType: 'com.scistor.object.document' }).then(response => {
                this.association_Doc = response.data
            })
        },
        // 获取相关多媒体
        getAssociationMedia (rowkey) {
            getRelationInfo({ rowkey: rowkey, objectType: 'com.scistor.object.media' }).then(response => {
                this.association_Media = response.data
            })
        },
        computedObjectType (type) {
            let tempType = ''
            switch (type) {
            case 'com.scistor.object.event':
                tempType = '事件'
                break
            case 'com.scistor.object.entity':
                tempType = '实体'
                break
            case 'com.scistor.object.document':
                tempType = '文档'
                break
            default:
                tempType = '多媒体'
            }
            return tempType
        },
        // 对象查看
        viewObjectInfo (objectType, instanceUri, objectUri, name, displayName, icon) {
            let currentUrl = window.location.href
            currentUrl = currentUrl.split('#')[0]
            currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}`
            window.open(currentUrl)
        },
        // 添加到目标分析
        handleAddToGraph (row) {
            util.addToRelationGraph({
                name: row.displayName,
                imgae: row.iconUrl,
                objecttype: row.objectType,
                objecturi: row.objectUri,
                rowkey: row.rowkey })
        }

    }
}
</script>
<style lang="less" >
.map-show {
	padding: 5px;
	height: 100%;
	.el-row {
		width: 100%;
	}
	.map-container {
		position: fixed;
		top: 56px;
		bottom: 56px;
		left: 0;
		.map-tool {
			height: 40px;
			padding: 2px 12px 0px 12px;
			background-color: #ebf2fa;
			.toolIcon {
				line-height: 35px;
				.el-button {
					background: #ebf2fa;
					border: none;
					padding: 7px 15px;
				}
				.el-button:hover {
					background: #ffffff;
				}
				.iconfont {
					font-size: 20px;
				}
			}
		}
		.map-box {
			height: 100%;
			.serach {
				width: 20%;
				position: absolute;
				top: 40px;
				right: 5px;
				z-index: 10;
			}
		}
	}
	.objectContainer {
		position: fixed;
		top: 56px;
		bottom: 10px;
		right: 0;
		.object-box {
			height: 100%;
			.el-tabs--border-card {
				border: none;
				box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0, 0, 0, 0);
			}
			.el-tabs {
				height: 100%;
			}
			.el-tabs__content {
				height: 100%;
			}
			.el-tab-pane {
				height: 100%;
			}
			.objectList {
				margin: 12px 4px;
				height: 100%;
				overflow-y: auto;
				.objectItem {
					padding: 10px;
					margin-bottom: 2px;
					min-height: 56px;
					.el-checkbox {
						float: left;
						margin-top: 12px;
					}
					em {
						width: 40px;
						height: 40px;
						margin-left: 16px;
						margin-right: 16px;
						display: inline-block;
						float: left;
						img {
							width: 40px;
							height: 40px;
						}
					}
				}
			}
			.obejctDeatil {
				height: 100%;
				.relationGraphBox {
					margin: 12px;
					padding-bottom: 8px;
					border-bottom: solid 1px #eee;
					box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.13);
					text-align: right;
					.addToGraph {
						background: #c17cc2;
						padding: 8px;
					}
				}
				.objectBox {
					height: 100%;
					.operation {
						margin: 8px 0px 8px 16px;
						.showMore {
							color: #1169c4;
							display: inline-block;
							cursor: pointer;
						}
						.hide {
							color: #1169c4;
							margin-left: 24px;
							display: inline-block;
							cursor: pointer;
						}
					}
					.associationAttr {
						margin-left: 12px;
						color: #666;
						li {
							line-height: 180%;
						}
					}
					.associationInfo {
						height: 70%;
						overflow-y: auto;
						margin-top: 8px;
					}
					.objwfBx {
						padding: 10px;
						margin-bottom: 2px;
						min-height: 2px;
						em {
							width: 40px;
							height: 40px;
							display: inline-block;
							float: left;
						}
						.TovSd {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
	#allmap {
		width: 100%;
		height: 100%;
	}
	.bk {
		border: solid 1px #e0e0e0;
		box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13);
	}
}
</style>
